<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>引出生命周期</title>
  </head>

  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      class Life extends React.Component {

        state = {
          opacity:1
        }

        render() {
          return (
            <div>
              <h2 style={{opacity:this.state.opacity}} id="h2">REACT学不会怎么办</h2>
              <button onClick={this.death}>不活了</button>
            </div>
          );
        }

        death = () =>{
          ReactDOM.unmountComponentAtNode(document.getElementById("test"));
         
        }

        componentDidMount(){
          this.timer = setInterval(() => {
          let {opacity} = this.state
            opacity -= 0.1
            if(opacity <= 0) opacity = 1
            this.setState({opacity})
          }, 200);
        }

        componentWillUnmount(){
          clearInterval(this.timer)
        }

      }

      ReactDOM.render(<Life />, document.getElementById("test"));
    </script>
  </body>
</html>
